﻿(function($){
$.fn.dialogs = function (prompt, buttons) {
    var dup = false;
    var xx;
    var yy;

    $(this).append('<a href="#" class="colos" style="cursor: pointer;" role="button"><span class="ui-icon ui-icon-closethick">关闭</span></a>');
    $(this).parent().append('<div style="text-align:center">' + prompt + '</div>');
    var $GreyBox = $(this).parent();

    $(this).find(".colos").mouseenter(function () {
        $(this).css("border", "1px solid #D2D5D8");
    })
                .mouseleave(function () {
                    $(this).css("border", "");
                }).click(function () {
                    $("#shade").animate({ "opacity": "0" }, 600);
                    $("body #shade").remove();
                    $GreyBox.hide();
                });
    $(window).resize(function () {
        $GreyBox.css({ left: $(window).width() / 2 - $GreyBox.innerWidth() / 2, top: $(window).height() / 2 - $GreyBox.innerHeight() / 2 });
    });
    $(this).mousedown(function (e) {
        $("body").append('<div id="shade" style=" width:100%; height:100%; opacity:0; position:absolute; top:0px; left:0px; background-color:Gray;"></div>');
        $("#shade").animate({ "opacity": "0.6" }, 600);
        dup = true;
        xx = e.pageX - $(this).offset().left;
        yy = e.pageY - $(this).offset().top;
    })
            .mouseup(function () {
                dup = false;
            });
    $(document).mouseleave(function () {
        dup = false;
    })
                .mousemove(function (e) {
                    var x = e.pageX - xx;
                    var y = e.pageY - yy;
                    var width = $(window).width();
                    var height = $(window).height();
                    var boxwidth = $GreyBox.innerWidth();
                    var boxheight = $GreyBox.innerHeight();
                    if (dup) {
                        if (x > 0) {
                            if (x + boxwidth < width) {
                                if (y > 0) {
                                    if (y + boxheight < height) {
                                        $GreyBox.css({ left: x, top: y });
                                    }
                                    else {
                                        $GreyBox.css({ left: x, top: height - boxheight });
                                    }
                                }
                                else {
                                    $GreyBox.css({ left: x, top: 0 });
                                }
                            }
                            else {
                                if (y > 0) {
                                    if (y + boxheight < height) {
                                        $GreyBox.css({ left: width - boxwidth, top: y });
                                    }
                                    else {
                                        $GreyBox.css({ left: width - boxwidth, top: height - boxheight });
                                    }
                                }
                                else {
                                    $GreyBox.css({ left: width - boxwidth, top: 0 });
                                }
                            }
                        }
                        else {
                            if (y > 0) {
                                if (y + boxheight < height) {
                                    $GreyBox.css({ left: 0, top: y });
                                }
                                else {
                                    $GreyBox.css({ left: 0, top: height - boxheight });
                                }
                            }
                            else {
                                $GreyBox.css({ left: 0, top: 0 });
                            }
                        }
                    }
                });
};
})(jQuery)


    <div
        style="width:180px; z-index:100; height:90px; top:43%; left:32%; position:absolute; background-color:#FFFFFF;">
        <div id="GreyBox" 
            style="border: 1px solid #C7C7C7; background-color: #EBEBEB; height:20px; margin:2px; cursor:move;"></div>
    </div>